<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> A tool for NoC visualization · shawlley</title><meta name="description" content="A tool for NoC visualization - shawlley"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/icon.png"><link rel="stylesheet" href="/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://example.com/atom.xml" title="shawlley"><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="shawlley" type="application/atom+xml">
</head><body><div class="wrap"><header><a href="/" class="logo-link"><img src="/icon.png" alt="logo"></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" class="nav-list-link">BLOG</a></li><li class="nav-list-item"><a href="/archives/" target="_self" class="nav-list-link">ARCHIVE</a></li><li class="nav-list-item"><a href="https://github.com/Shawlleyw" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><main class="container"><div class="post"><article class="post-block"><h1 class="post-title">A tool for NoC visualization</h1><div class="post-info">Oct 1, 2022</div><div class="post-content"><p>Our visualization tool <a target="_blank" rel="noopener" href="https://github.com/ueqri/vis4mesh">vis4mesh</a> is designed to help the research of NoC!</p>
<p>Vis4Mesh is a visualization tool for designing mesh Network-on-Chips(NoC) for Wafer-Scale devices, like <a target="_blank" rel="noopener" href="https://cerebras.net/blog/cerebras-wafer-scale-engine-why-we-need-big-chips-for-deep-learning/">Cerebras Wafer Scale Engine</a>.</p>
<p>It is mainly assisted with NoC traffic research in <a target="_blank" rel="noopener" href="https://gitlab.com/akita">Akita project</a>, also capable for other scenarios to visualize the mesh topology and traffics.</p>
<span id="more"></span>

<p><strong>Notice: This project is still under development, some of the features are not solid. We would update the documents after every new milestone.</strong></p>
<h2 id="Motivation"><a href="#Motivation" class="headerlink" title="Motivation"></a>Motivation</h2><p>The large scale of the wafer makes it difficult for a designer to get insight into the network behavior simply from the numbers like bandwidth and latency of links. A visualization tool with a view of mixed temporal and spatial statistics would benefit the architects to analyze the performance issues of wafer-scale devices.</p>
<p>After reviewing the existing visualization tool, we found no systematic solution that is directly applicable to visualizing wafer-scale NoC, mainly due to the scalability and unique requirement of NoC. Thus we propose Vis4Mesh with the five key features as follows.</p>
<h2 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h2><ol>
<li><p><strong>Overview of mixed temporal and spatial statistics</strong></p>
<p>The temporal view help to distinguish the communication pattern, while the spatial points out the hotspot location in the mesh. We also provide a temporal overview of one switch&#x2F;channel if you click it, like switch buffer pressure over time.</p>
</li>
<li><p><strong>Sheer scalability to visualize wafers with millions of devices</strong></p>
<p>Existing network visualization tools do not consider the scale of wafers with millions of nodes and links. We design the tool targeting large-scale mesh system, using a hierarchy packing and unpacking way to support a smooth and intelligible zoom, with well-optimized rendering performance.</p>
</li>
<li><p><strong>Dynamic player of network-on-chip traffic</strong></p>
<p>In pause mode, the tool could display the traffic statistics of any time, and brush a time range to see the details of a stage&#x2F;pattern.<br>In play mode, it would show the dynamic changes of traffic to look at the behavior of the whole or part network.</p>
</li>
<li><p><strong>Flexibility to cluster nodes as a functional module</strong></p>
<p>Clustering is quite common in the field of Coarse Grain Reconfigurable Architecture. We propose a flexible way to select nodes in frontend to build a different-sized cluster directly.</p>
</li>
<li><p><strong>Collaboration with another mature visualization tool</strong></p>
<p>Akita project already integrates with <a target="_blank" rel="noopener" href="https://osf.io/73ry8/">Akita Daisen</a>, a tool for visualizing component-level GPU execution like the request to caches, the process of compute units.<br>Vis4Mesh could serve as a supplementary of Daisen to support mesh network traffic visualization that Daisen could not perform very well.</p>
</li>
</ol>
<h2 id="Design"><a href="#Design" class="headerlink" title="Design"></a>Design</h2><p>Briefly, the tool consists of two parts: <strong>Web frontend</strong> and <strong>Server backend</strong>. Frontend only do rendering work, backend feeds the frontend with full graph details through WebSocket.</p>
<p>For details, please refer to <a href="doc/design.md">doc&#x2F;design.md</a>.</p>
<h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><h2 id="Detached-Mode"><a href="#Detached-Mode" class="headerlink" title="Detached Mode"></a>Detached Mode</h2><p>To use the <strong>frontend</strong>, you can directly access <a target="_blank" rel="noopener" href="https://ueqri.github.io/vis4mesh-release/">https://ueqri.github.io/vis4mesh-release/</a>. The page is built by GitHub Actions on the latest release.</p>
<p>To use the <strong>backend</strong>, you can either use our example server for Akkalat in <code>src</code>, or your customized server with port 8080 listened for WebSockets and communication protocol supported. The backend is more complex to run in detached mode, please see <a href="doc/design.md">doc&#x2F;backend.md</a> for more details.</p>
<h2 id="Container-Mode"><a href="#Container-Mode" class="headerlink" title="Container Mode"></a>Container Mode</h2><p>Two docker-compose configurations are provided in <a target="_blank" rel="noopener" href="https://github.com/ueqri/vis4mesh/blob/main/docker-compose.yml">docker-compose.yml</a> and <a target="_blank" rel="noopener" href="https://github.com/ueqri/vis4mesh/blob/main/example/one-key.yml">example&#x2F;one-key.yml</a>. Based on these environments, there are two options to choose respectively.</p>
<h3 id="Setup-server-and-database-in-Docker"><a href="#Setup-server-and-database-in-Docker" class="headerlink" title="Setup server and database in Docker"></a>Setup server and database in Docker</h3><p><em>Backend server</em> and <em>Redis DB</em> are packed into Docker as <a target="_blank" rel="noopener" href="https://github.com/ueqri/vis4mesh/blob/main/docker-compose.yml">docker-compose.yml</a>, which make it convenient to build and maintain the backend.</p>
<p>Here we also introduce how to build frontend in the host, if you choose aforementioned online site, just skip the frontend build.</p>
<h4 id="Prerequisites"><a href="#Prerequisites" class="headerlink" title="Prerequisites"></a>Prerequisites</h4><ul>
<li><strong>frontend</strong>: npm(v8.0+), NodeJS(v16.0+)</li>
<li><strong>backend</strong>: docker(v20.0+), docker-compose(v2.0+)</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> git@github.com:ueqri/vis4mesh.git</span><br><span class="line"><span class="built_in">cd</span> vis4mesh</span><br><span class="line"><span class="comment"># if you use online site, skip the two `npm` commands</span></span><br><span class="line">npm install</span><br><span class="line">npm start <span class="comment"># run webpack with HTTP server in localhost:1234</span></span><br><span class="line">docker-compose up <span class="comment"># add `-d` to run in background</span></span><br></pre></td></tr></table></figure>

<p>To close the container, use <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop in interactive mode, then <code>docker-compose down</code>.</p>
<h3 id="Setup-all-components-in-Docker"><a href="#Setup-all-components-in-Docker" class="headerlink" title="Setup all components in Docker"></a>Setup all components in Docker</h3><p>Use one-key docker-compose file to set up both <strong>frontend</strong> and <strong>backend</strong> in Docker.</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> git@github.com:ueqri/vis4mesh.git</span><br><span class="line"><span class="built_in">cd</span> vis4mesh</span><br><span class="line">docker-compose -f example/one-key.yml up <span class="comment"># add `-d` to run in background</span></span><br></pre></td></tr></table></figure>

<p>Likewise, <code>docker-compose -f example/one-key.yml down</code> to close.</p>
<h2 id="After-Setup"><a href="#After-Setup" class="headerlink" title="After Setup"></a>After Setup</h2><p>If it’s all set, just open your favorable browser to view <a target="_blank" rel="noopener" href="http://localhost:1234/">http://localhost:1234/</a> and see the visualization.</p>
<p>We have provided a demo DB generated by FIR(length:100000) in 8x8 Wafer-scale GPU <a target="_blank" rel="noopener" href="https://github.com/ueqri/akkalat/tree/v3">akkalat v3</a>. And all the backend config would be well done by docker-compose.</p>
<h2 id="Follow-up"><a href="#Follow-up" class="headerlink" title="Follow-up"></a>Follow-up</h2><p>As for follow-up work, we’d implemented these features:</p>
<ul>
<li><input disabled="" type="checkbox"> Fine-tune the zoom interaction for large-scale visualization</li>
<li><input disabled="" type="checkbox"> Trace more status data of switch and channels in <a target="_blank" rel="noopener" href="https://github.com/ueqri/akkalat">Akita Akkalat</a> and show in side canvas</li>
<li><input disabled="" type="checkbox"> Add minimap for mesh as another spatial overview</li>
<li><input disabled="" type="checkbox"> Add configuration in front to change data port</li>
<li><input disabled="" type="checkbox"> Build the detailed documents about the design and protocols</li>
</ul>
<h2 id="Snapshot-of-Main-Layout"><a href="#Snapshot-of-Main-Layout" class="headerlink" title="Snapshot of Main Layout"></a>Snapshot of Main Layout</h2><p><img src="/images/vis4mesh/v0.2.3.png" alt="pic"></p>
<h2 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h2><p><a target="_blank" rel="noopener" href="https://syifan.github.io/akita_hpca2020_tutorial.html">Tutorial on the Akita Simulator Framework and MGPUSim</a></p>
<p><a target="_blank" rel="noopener" href="https://gitlab.com/akita">GitLab of Akita Simulator Framework</a></p>
<p><a target="_blank" rel="noopener" href="https://docs.docker.com/compose/install/">Docker Docs: Install Docker Compose</a></p>
</div></article></div></main><footer><div class="paginator"><a href="/2022/10/29/genre-hue/" class="prev">PREV</a><a href="/2022/09/22/A-RISC-V-circuit-simulator-on-logism-platform/" class="next">NEXT</a></div><div class="copyright"><p>© undefined - 2022 <a href="http://example.com">shawlley</a>, powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/pinggod/hexo-theme-apollo" target="_blank">hexo-theme-apollo</a>.</p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous"></script></body></html>